<!--头部版块-->
<app-page-header [pageHeaderInfo]="pageHeaderInfo"></app-page-header>

<div class="normal-table-wrap bg-color-no p-b-50">
  <nz-card [nzBordered]="true" class="m-b-20" nzTitle="仓库管理">
    <app-water-mark></app-water-mark>
    <form nz-row nz-form nzLayout="vertical" [formGroup]="validateForm" (ngSubmit)="submitForm()">
      <nz-form-item nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="12" nzSm="24" nzXs="24">
        <nz-form-label nzSpan="24" nzFor="email">仓库名</nz-form-label>
        <nz-form-control [nzXl]="18" [nzXXl]="18" [nzLg]="18" [nzMd]="24" nzSm="24"
                         nzErrorTip="The input is not valid E-mail!">
          <input nz-input formControlName="email" id="a"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="12" nzSm="24" nzXs="24">
        <nz-form-label nzSpan="24" nzFor="email">仓库域名</nz-form-label>
        <nz-form-control [nzXl]="18" [nzXXl]="18" [nzLg]="18" [nzMd]="24" nzSm="24"
                         nzErrorTip="The input is not valid E-mail!">
          <input nz-input formControlName="email" id="b"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="24" nzSm="24" nzXs="24">
        <nz-form-label nzSpan="24" nzRequired nzFor="email">仓库管理员</nz-form-label>
        <nz-form-control [nzXl]="24" [nzXXl]="24" [nzLg]="24" [nzMd]="24" nzSm="24"
                         nzErrorTip="The input is not valid E-mail!">
          <input nz-input formControlName="email" id="c"/>
        </nz-form-control>
      </nz-form-item>


      <nz-form-item nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="12" nzSm="24" nzXs="24">
        <nz-form-label nzSpan="24" nzFor="email">审批人</nz-form-label>
        <nz-form-control [nzXl]="18" [nzXXl]="18" [nzLg]="18" [nzMd]="24" nzSm="24"
                         nzErrorTip="The input is not valid E-mail!">
          <input nz-input formControlName="email" id="d"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="12" nzSm="24" nzXs="24">
        <nz-form-label nzSpan="24" nzFor="email">生效日期</nz-form-label>
        <nz-form-control [nzLg]="18" [nzXl]="18" [nzXXl]="18" [nzMd]="24" nzSm="24"
                         nzErrorTip="The input is not valid E-mail!">
          <input nz-input formControlName="email" id="e"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="24" nzSm="24" nzXs="24">
        <nz-form-label nzSpan="24" nzRequired nzFor="email">仓库类型</nz-form-label>
        <nz-form-control [nzXl]="24" [nzXXl]="24" [nzLg]="24" [nzMd]="24" nzSm="24"
                         nzErrorTip="The input is not valid E-mail!">
          <input nz-input formControlName="email" id="f"/>
        </nz-form-control>
      </nz-form-item>
    </form>
  </nz-card>

  <nz-card [nzBordered]="true" class="m-b-20" nzTitle="任务管理">
    <app-water-mark></app-water-mark>
    <form nz-row nz-form nzLayout="vertical" [formGroup]="validateForm" (ngSubmit)="submitForm()">
      <nz-form-item nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="12" nzSm="24" nzXs="24">
        <nz-form-label nzSpan="24" nzFor="email">任务名</nz-form-label>
        <nz-form-control [nzXl]="18" [nzXXl]="18" [nzLg]="18" [nzMd]="24" nzSm="24"
                         nzErrorTip="The input is not valid E-mail!">
          <input nz-input formControlName="email" id="z"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="12" nzSm="24" nzXs="24">
        <nz-form-label nzSpan="24" nzFor="email">任务描述</nz-form-label>
        <nz-form-control [nzXl]="18" [nzXXl]="18" [nzLg]="18" [nzMd]="24" nzSm="24"
                         nzErrorTip="The input is not valid E-mail!">
          <input nz-input formControlName="email" id="x"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="24" nzSm="24" nzXs="24">
        <nz-form-label nzSpan="24" nzRequired nzFor="email">执行人</nz-form-label>
        <nz-form-control [nzXl]="24" [nzXXl]="24" [nzLg]="24" [nzMd]="24" nzSm="24"
                         nzErrorTip="The input is not valid E-mail!">
          <input nz-input formControlName="email" id="v"/>
        </nz-form-control>
      </nz-form-item>


      <nz-form-item nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="12" nzSm="24" nzXs="24">
        <nz-form-label nzSpan="24" nzFor="email">责任人</nz-form-label>
        <nz-form-control [nzXl]="18" [nzXXl]="18" [nzLg]="18" [nzMd]="24" nzSm="24"
                         nzErrorTip="The input is not valid E-mail!">
          <input nz-input formControlName="email" id="h"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="12" nzSm="24" nzXs="24">
        <nz-form-label nzSpan="24" nzFor="email">生效日期</nz-form-label>
        <nz-form-control [nzLg]="18" [nzXl]="18" [nzXXl]="18" [nzMd]="24" nzSm="24"
                         nzErrorTip="The input is not valid E-mail!">
          <input nz-input formControlName="email" id="j"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="24" nzSm="24" nzXs="24">
        <nz-form-label nzSpan="24" nzRequired nzFor="email">任务类型</nz-form-label>
        <nz-form-control [nzXl]="24" [nzXXl]="24" [nzLg]="24" [nzMd]="24" nzSm="24"
                         nzErrorTip="The input is not valid E-mail!">
          <input nz-input formControlName="email" id="fl"/>
        </nz-form-control>
      </nz-form-item>
    </form>
  </nz-card>

  <nz-card [nzBordered]="false" nzTitle="成员管理">
    <app-water-mark></app-water-mark>
    <nz-table [nzFrontPagination]="false" #editRowTable [nzData]="listOfData">
      <thead>
      <tr>
        <th nzWidth="25%">成员姓名</th>
        <th nzWidth="15%">工号</th>
        <th nzWidth="40%">所属部门</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of editRowTable.data">
        <ng-container *ngIf="!editCache[data.id].edit; else editTemplate">
          <td>{{ data.name }}</td>
          <td>{{ data.age }}</td>
          <td>{{ data.address }}</td>
          <td><a (click)="startEdit(data.id)">Edit</a></td>
        </ng-container>
        <ng-template #editTemplate>
          <td><input type="text" nz-input [(ngModel)]="editCache[data.id].data.name"/></td>
          <td><input type="text" nz-input [(ngModel)]="editCache[data.id].data.age"/></td>
          <td><input type="text" nz-input [(ngModel)]="editCache[data.id].data.address"/></td>
          <td>
            <a (click)="saveEdit(data.id)" class="save">Save</a>
            <a nz-popconfirm nzTitle="Sure to cancel?" (nzOnConfirm)="cancelEdit(data.id)">Cancel</a>
          </td>
        </ng-template>
      </tr>
      </tbody>
    </nz-table>
    <button class="add-button with-full" nz-button nzType="dashed">
      <i nz-icon nzType="plus"></i>
      新增成员
    </button>
  </nz-card>
</div>

<app-footer-submit>
  <button class="right" (click)="submit()" nz-button nzType="primary">提交</button>
</app-footer-submit>
